<script>
  import { testState } from "./../store/Test.svelte";
  import { context } from "./../store/Context.svelte";
  import Box from "./icons/Box.svelte";
  import Box2 from "./icons/Box2.svelte";
  import Child from "./Child.svelte";
  import Tree from "./Tree.svelte";
  import Form from "./form/Form.svelte";
  import Input from "./form/Input.svelte";
  let user = $state({
    name: "aa",
    age: 10,
  });
  $effect(() => {
    document.body.setAttribute("data-theme", testState.theme);
  });
  let form = $state([
    { option: { type: "password" }, value: "aaa", name: "a1" },
    { option: { type: "text" }, value: "aaa", name: "a2" },
    { option: { type: "text" }, value: "aaa", name: "a3" },
  ]);
  $inspect(form);
</script>

<Child bind:user></Child>
<div class="aa">log</div>
<div class="aa">{testState.name}</div>
{#if context.loading === true}
  <div>loading...</div>
{:else if context.data}
  {#each context.data as item}
    <div class="user">
      <div class="name">{item.realName}</div>
    </div>
  {/each}
{:else}
  <button class="button" onclick={() => context.load()}>click</button>
{/if}

<button
  class="button"
  onclick={() =>
    (testState.theme = testState.theme === "light" ? "dark" : "light")}
  ><Box2 /> theme</button
>
<div class="iconx spinner"><Box class="spinner" /><Box2 /></div>

<Form>
  {#each form as item}
    <Input name={item.name} bind:value={item.value} option={item.option} />
  {/each}
</Form>

<Tree />

<style lang="scss">
  .aa {
    color: red;
  }
  .user {
    .name {
      color: $text;
    }
  }
  .iconx {
    font-size: 30px;
    color: blue;
    display: inline-block;
  }
</style>
